  <template>
      <div class="edit-popup">
          <popup
              ref="popupRef"
              :title="popupTitle"
              :async="true"
              width="75%"
              :clickModalClose="true"
              @confirm="handleSubmit"
              @close="handleClose"
          >
              <el-form
                  ref="formRef"
                  :model="formData"
                  label-width="200px"
                  :rules="formRules"
                  :inline="true"
                  class="supplierEditformRef"
              >
                  <el-form-item label="企业名称" prop="firmName">
                      <el-input v-model="formData.firmName" placeholder="请输入企业名称" />
                  </el-form-item>
                  <el-form-item label="类型" prop="type">
                      <el-select class="flex-1" v-model="formData.type" placeholder="请选择类型">
                          <el-option label="类型1" value="1" />
                          <el-option label="类型2" value="2" />
                      </el-select>
                  </el-form-item>
                  <el-form-item label="入驻日期" prop="dateCheck">
                      <el-date-picker
                          class="flex-1 !flex"
                          v-model="formData.dateCheck"
                          type="datetime"
                          clearable
                          value-format="YYYY-MM-DD hh:mm:ss"
                          placeholder="请选择入驻日期"
                      />
                  </el-form-item>
                  <el-form-item label="省" prop="dart">
                      <el-input v-model="formData.dart" placeholder="请输入省" />
                  </el-form-item>
                  <el-form-item label="市" prop="town">
                      <el-input v-model="formData.town" placeholder="请输入市" />
                  </el-form-item>
                  <el-form-item label="区" prop="zone">
                      <el-input v-model="formData.zone" placeholder="请输入区" />
                  </el-form-item>
                  <el-form-item label="省市区" prop="provinceid">
                      <el-input v-model="formData.provinceid" placeholder="请输入省市区" />
                  </el-form-item>
                  <el-form-item label="详细地址" prop="fullAddress">
                      <el-input v-model="formData.fullAddress" placeholder="请输入详细地址" />
                  </el-form-item>
                  <el-form-item label="联系人" prop="linkman">
                      <el-input v-model="formData.linkman" placeholder="请输入联系人" />
                  </el-form-item>
                  <el-form-item label="联系电话" prop="phone">
                      <el-input v-model="formData.phone" placeholder="请输入联系电话" />
                  </el-form-item>
                  <el-form-item label="服务产品" prop="servingProductid">
                      <el-input v-model="formData.servingProductid" placeholder="请输入服务产品" />
                  </el-form-item>
                  <el-form-item label="服务费率" prop="serviceTariffing">
                      <el-input v-model="formData.serviceTariffing" placeholder="请输入服务费率" />
                  </el-form-item>
                  <el-form-item label="合作状态" prop="coopStatus">
                      <el-select
                          class="flex-1"
                          v-model="formData.coopStatus"
                          placeholder="请选择合作状态"
                      >
                          <el-option label="正常" value="1" />
                          <el-option label="禁用" value="2" />
                      </el-select>
                  </el-form-item>
                  <el-form-item label="收款银行" prop="dueBank">
                      <el-input v-model="formData.dueBank" placeholder="请输入收款银行" />
                  </el-form-item>
                  <el-form-item label="备注" prop="remark">
                      <el-input v-model="formData.remark" placeholder="请输入备注" />
                  </el-form-item>
                  <el-form-item label="收款银行账户" prop="receivingBankAccount">
                      <el-input
                          v-model="formData.receivingBankAccount"
                          placeholder="请输入收款银行账户"
                      />
                  </el-form-item>
                  <el-form-item label="收款方式" prop="paymentTermid">
                      <el-select
                          class="flex-1"
                          v-model="formData.paymentTermid"
                          placeholder="请选择收款方式"
                      >
                          <el-option label="收款方式1" value="1" />
                          <el-option label="收款方式2" value="2" />
                      </el-select>
                  </el-form-item>
                  <el-form-item label="收款二维码上传" prop="paymentCodeUpload">
                      <el-input
                          v-model="formData.paymentCodeUpload"
                          placeholder="请输入收款二维码上传"
                      />
                  </el-form-item>
                  <el-form-item label="操作人" prop="userId">
                      <el-input v-model="formData.userId" placeholder="请输入操作人" />
                  </el-form-item>
              </el-form>
          </popup>
      </div>
  </template>
  <script lang="ts" setup>
  import type { FormInstance } from 'element-plus'
  import { supplierEdit, supplierAdd, supplierDetail } from '@/api/supplier'
  import Popup from '@/components/popup/index.vue'
  import feedback from '@/utils/feedback'
  import type { PropType } from 'vue'
  defineProps({
      dictData: {
          type: Object as PropType<Record<string, any[]>>,
          default: () => ({})
      }
  })
  const emit = defineEmits(['success', 'close'])
  const formRef = shallowRef<FormInstance>()
  const popupRef = shallowRef<InstanceType<typeof Popup>>()
  const mode = ref('add')
  const popupTitle = computed(() => {
      return mode.value == 'edit' ? '编辑供应商' : '新增供应商'
  })

  const formData = reactive({
      id: '',
      firmName: '',
      type: '',
      dateCheck: '',
      dart: '',
      town: '',
      zone: '',
      provinceid: '',
      fullAddress: '',
      linkman: '',
      phone: '',
      servingProductid: '',
      serviceTariffing: '',
      coopStatus: '',
      dueBank: '',
      remark: '',
      receivingBankAccount: '',
      paymentTermid: '',
      paymentCodeUpload: '',
      userId: ''
  })

  const formRules = {
      firmName: [
          {
              required: true,
              message: '请输入企业名称',
              trigger: ['blur']
          }
      ],
      type: [
          {
              required: true,
              message: '请选择类型',
              trigger: ['blur']
          }
      ]
  }

  const handleSubmit = async () => {
      await formRef.value?.validate()
      const data: any = { ...formData }
      mode.value == 'edit' ? await supplierEdit(data) : await supplierAdd(data)
      popupRef.value?.close()
      feedback.msgSuccess('操作成功')
      emit('success')
  }

  const open = (type = 'add') => {
      mode.value = type
      popupRef.value?.open()
  }

  const setFormData = async (data: Record<string, any>) => {
      for (const key in formData) {
          if (data[key] != null && data[key] != undefined) {
              //@ts-ignore
              formData[key] = data[key]
          }
      }
  }

  const getDetail = async (row: Record<string, any>) => {
      const data = await supplierDetail({
          id: row.id
      })
      setFormData(data)
  }

  const handleClose = () => {
      emit('close')
  }

  defineExpose({
      open,
      setFormData,
      getDetail
  })
  </script>

  <style scoped>
  .supplierEditformRef .el-form-item {
      width: 500px;
  }
  ::v-deep .el-collapse-item__header {
    padding-left: 54px;
    background-color: var(--el-bg-color-collapse);
    font-size: 16px;
    font-weight: 600;
    color: var(--el-text-color-collapse);
  }
  ::v-deep .el-collapse-item__wrap {
      padding-top: 40px;
  }
  </style>
